<template>
  <view class="recommend-box" v-if="hasResult">
    <view class="recommend-title">
      <image class="recommend-title-img" mode="widthFix" src="./img/recommend.png" alt="">
    </view>
    <view class="recommend-list">
      <template v-for="(item, index) in list">
        <view class="recommend-item" :key="index">
          <image class="recommend-item-img" mode="widthFix" :src="item.imageLinks" alt="" @click="urlTarget(item)"></image>
        </view>
      </template>
    </view>
  </view>
</template>
<script>
import { appProductId } from "@/http/env.js";
import { getProductConfigApi } from "@/http/api.js";
export default {
  name: 'BottomRecommend',
  data() {
    return {
      positionId: 3,
      hasResult: false,
      list: []
    }
  },
  mounted() {
    // 获取产品线配置
    getProductConfigApi({
      parentId: appProductId,
      positionType: this.positionId
    }).then(res => {
      if (res.code === 200 && res.data.length != 0) {
        this.hasResult = true;
        this.list = res.data;
      }else{
        this.hasResult = false;
      }
    })
  },
  methods: {
    urlTarget(row) {
      if (row.isOut == 1) {
        window.location.href = row.skipLinks;
        return
      }else{
        uni.navigateTo({
          url: row.skipLinks
        });
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.recommend-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 200rpx;
  width: 100%;
  box-sizing: border-box;
  background-color: #e5e5e5;
  .recommend-title {
    width: 100%;
    background-color: #771e08;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 13px 0;
    .recommend-title-img {
      width: 262rpx;
      height: 34rpx;
    }
  }
  .recommend-list {
    .recommend-item {
      padding-top: 25px;
    }
  }
}
</style>